<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax-jQuery</title>
<style type="text/css">
html, body, p {
	margin: 0;
	padding: 0;
}

body {
	width: 1200px;
	margin: 0 auto;
}

body div {
	margin: 0 auto;
	text-align: center;
	font-size: 16px;
}

th:nth-of-type(n) {
	width: 80px;
}

th:nth-of-type(2n) {
	width: 180px;
}

th:nth-of-type(3n) {
	width: 180px;
}

tr {
	height: 40px;
}

#tabTitle {
	
}
</style>
</head>
<body>
	<!-- 
		需求：
			1.使用jQuery来写Ajax
			2.业务：在前台页面通过Ajax发送请求，后台传输过来User对象，展示在前台的列表中
	 -->
	<div>
		<h1 id="tabTitle">用 户 信 息</h1>
		<div id="tab">
			<table border="1px" cellpadding="0" cellspacing="0" align="center"
				id="userTable">
				<tr>
					<th>序号</th>
					<th>名字</th>
					<th>手机号</th>
					<th>年龄</th>
				</tr>
			</table>
			<button id="infoButton">点击获取信息</button>
		</div>
	</div>

	<script src="./js/jquery-3.1.1.js"></script>
	
	<script type="text/javascript">
	$('#infoButton').click(function(){
        $.ajax({
          url:"MyServlet",
          type:"post",
          data:{
            "uname":"小张",
            "age":12,
            "sex":"男"
          },
          dataType:"text",
          success:function(resultData){
            console.log("resultData",resultData);
            var json = JSON.parse(resultData);
            var code = json.code;
            var count =json.count;
            var msg = json.msg;
            var userList = json.list;
            console.log(code,count,msg);
            console.log(userList);
            /*每次点击先清空，再添加数据*/
            $('table').html("");
            $('table').append("<tr><th>序号</th><th>名字</th><th>手机号</th><th>年龄</th></tr>");
           <!--> 判断是否读到数据<-->
            if(!$.isEmptyObject(userList)){
            	$.each(userList,function(i,ele){
                    $('table').append("<tr><td>"+(i+1)+"</td><td>"+ele.name+"</td><td>"+ele.phone+"</td><td>"+ele.age+"</td></tr>");
                  });
            }
            else{
            	$('table').append("<tr><td colspan='4'>未查询到数据</td></tr>");
            }
          }
        })
      })
	 </script>
</body>
</html>